<template>
  <canvas ref="canvas" class="absolute" />
</template>

<script setup lang="ts">
import useBet from '@/composables/useBet'
import { DrawCurve } from '@/composables/useDraw/DrawCurve'
import { DrawInit } from '@/composables/useDraw/DrawInit'
import useSection from '@/composables/useSection'
import { onMounted, ref } from 'vue'

const canvas = ref<HTMLCanvasElement>()
const { sectionId } = defineProps<{
  sectionId: number
}>()

const { find: findSection, calcCanvasAndHeight } = useSection()
const { bets, all: allBet } = useBet()

onMounted(async () => {
  await findSection(sectionId)
  await allBet({ sectionId })

  const parent = canvas.value?.parentNode?.parentNode as any
  const { width, height, startY } = await calcCanvasAndHeight(parent!.offsetWidth, parent!.offsetHeight)
  canvas.value!.height = height
  canvas.value!.width = width

  const ctx = canvas.value?.getContext('2d')!
  new DrawInit(ctx, startY, height).draw()
  new DrawCurve(ctx, startY, bets.value?.data!).draw()
})
</script>
